<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        计算属性：
            1、定义：要用的属性不存在，要通过(vm中)已有的属性计算得来
            2、原理：底层借助Object.defineproperty方法提供的getter和setter
            3、get什么时候调用：
                (1)、初次读取fullname时。 
                (2)、所依赖的数据(使用到的)发生改变时
            4、优势：与methods相比，内部有缓存机制(复用)，效率更高，调试更方便
            5、备注：
                (1)计算谁能够最终会出现在vm上，直接读取名称使用即可，不需要像methods一样函数读取
                (2)如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生
     -->
    <div id="root">
        姓: <input type="text" v-model="firstName"><br>
        名: <input type="text" v-model:value="lastName"><br>
        姓名: <span>{{fullName}}</span>
        <!-- slice(0,3)只取前0-2为 -->
    </div>

    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三'
            },
            computed:{
                fullName:{
                    // get什么时候调用：1、初次读取fullname时。 2、所依赖的数据(使用到的)发生改变时
                    get(){
                        // console.log(this)//此处的this是vm
                        return this.firstName + '-' + this.lastName
                    },
                    // set什么时候调用：当fullName被修改时
                    set(value){
                        console.log('set',value)
                        const arr = value.split('-');
                        this.firstName = arr[0];
                        this.lastName = arr[1]
                    }
                    
                }
            }
        })
    </script>
</body>
</html>